<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="shortcut icon" href="../image/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4726301_bklsnefroh.css">
    <link rel="stylesheet" href="../style/public.css">
    <title>社区</title>
    <style>
        .active {
            line-height: 40px;
            color: #367eab;
            border-bottom: 3px solid #367eab;
        }

        .item-top img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }

        .item-cont img {
            width: 115px;
            height: 90px;
        }

        .video-img {
            width: 100%;
        }

        .video-btn {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.3);
            padding: 20px;
            border-radius: 50%;
        }

        .video-time {
            bottom: 12px;
            right: 3px;
            color: #fff;
            padding: 4px;
            background-color: rgba(0, 0, 0, 0.3);
        }
    </style>
</head>

<body>

    <header class="nav  w100p fca h50 bafff fixed top0 w100p z10">
        <span v-for="(item, index) in list" :key="item.id" @click="actives = index"
            :class="{'active': index === actives}" class="f16">{{ item.name }}</span>
    </header>
    <div style="height: 52px;"></div>

    <!-- 点赞排序 -->
    <div class="content pl-10 pr-10 bafff">
        <div v-for="(item, index) in list" :key="item.id" class="item pt-10">
            <a :href="'./user-essay.html?id='+item.id">
                <div class="item-top fl aic">
                    <img :src="item.icon" alt="">
                    <p class="fl jcc fdc ml-10">
                        <span class="f15 fwb">{{ item.name }}</span>
                        <span class="c999 mt-5">{{ item.time }}</span>
                    </p>
                </div>
                <h2 class="mt-10 f14 fwb ovh2 lh13">{{ item.h1 }}</h2>
                <div v-if="item.url1" v-for="(item, index) in item.imgUrl" :key="index" class="fl mt-10 item-cont">
                    <img class="mr-5" :src="item.url1" alt="">
                    <img class="mr-5" :src="item.url2" alt="">
                    <img :src="item.url3" alt="">
                </div>
                <div v-if="item.videoUrl" class="fl rel">
                    <video class="video-img" :src="item.videoUrl" alt=""></video>
                    <div class="video-btn abs">
                        <i class="iconfont icon-bofang cfff"></i>
                    </div>
                    <div class="video-time abs fwb">{{ item.duration }}</div>
                </div>
                <div class="h30 bbs fcb">
                    <p class="fcc"><i class="iconfont icon-icon2 f15 mr-3"></i>{{ item.browses }}浏览</p>
                    <p class="fcc">
                        <span class="fcc mr-5"><i class="iconfont icon-pinglun f15 mr-3"></i>{{ item.comments }}</span>
                        <span class="fcc"><i class="iconfont icon-icon f15 mr-3"></i>{{ item.browse }}</span>
                    </p>
                </div>
            </a>
        </div>
    </div>

    <!-- 日期排序 -->
    <div class="contday pl-10 pr-10 bafff">

        <div v-for="(item, index) in list" :key="item.id" class="item pt-10">
            <a :href="'./user-essay.html?id='+item.id">
                <div class="item-top fl aic">
                    <img :src="item.icon" alt="">
                    <p class="fl jcc fdc ml-10">
                        <span class="f15 fwb">{{ item.name }}</span>
                        <span class="c999 mt-5">{{ item.time }}</span>
                    </p>
                </div>
                <h2 class="mt-10 f14 fwb ovh2 lh13">{{ item.h1 }}</h2>
                <div v-if="item.url1" v-for="(item, index) in item.imgUrl" :key="index" class="fl mt-10 item-cont">
                    <img class="mr-5" :src="item.url1" alt="">
                    <img class="mr-5" :src="item.url2" alt="">
                    <img :src="item.url3" alt="">
                </div>
                <div v-if="item.videoUrl" class="fl rel">
                    <video class="video-img" :src="item.videoUrl" alt=""></video>
                    <div class="video-btn abs">
                        <i class="iconfont icon-bofang cfff"></i>
                    </div>
                    <div class="video-time abs fwb">{{ item.duration }}</div>
                </div>
                <div class="h30 bbs fcb">
                    <p class="fcc"><i class="iconfont icon-icon2 f15 mr-3"></i>{{ item.browses }}浏览</p>
                    <p class="fcc">
                        <span class="fcc mr-5"><i class="iconfont icon-pinglun f15 mr-3"></i>{{ item.comments }}</span>
                        <span class="fcc"><i class="iconfont icon-icon f15 mr-3"></i>{{ item.browse }}</span>
                    </p>
                </div>
            </a>
        </div>

    </div>

    <!-- 浏览量排序 -->
    <div class="contbor pl-10 pr-10 bafff">

        <div v-for="(item, index) in list" :key="item.id" class="item pt-10">
            <a :href="'./user-essay.html?id='+item.id">
                <div class="item-top fl aic">
                    <img :src="item.icon" alt="">
                    <p class="fl jcc fdc ml-10">
                        <span class="f15 fwb">{{ item.name }}</span>
                        <span class="c999 mt-5">{{ item.time }}</span>
                    </p>
                </div>
                <h2 class="mt-10 f14 fwb ovh2 lh13">{{ item.h1 }}</h2>
                <div v-if="item.url1" v-for="(item, index) in item.imgUrl" :key="index" class="fl mt-10 item-cont">
                    <img class="mr-5" :src="item.url1" alt="">
                    <img class="mr-5" :src="item.url2" alt="">
                    <img :src="item.url3" alt="">
                </div>
                <div v-if="item.videoUrl" class="fl rel">
                    <video class="video-img" :src="item.videoUrl" alt=""></video>
                    <div class="video-btn abs">
                        <i class="iconfont icon-bofang cfff"></i>
                    </div>
                    <div class="video-time abs fwb">{{ item.duration }}</div>
                </div>
                <div class="h30 bbs fcb">
                    <p class="fcc"><i class="iconfont icon-icon2 f15 mr-3"></i>{{ item.browses }}浏览</p>
                    <p class="fcc">
                        <span class="fcc mr-5"><i class="iconfont icon-pinglun f15 mr-3"></i>{{ item.comments }}</span>
                        <span class="fcc"><i class="iconfont icon-icon f15 mr-3"></i>{{ item.browse }}</span>
                    </p>
                </div>
            </a>
        </div>

    </div>

    <div class="fcc fdc h50">
        <p>没有更多内容了</p>
        <p>去看看其他内容吧</p>
    </div>



    <div style="height: 50px;"></div>
    <footer class="footer w100p bafff fixed h50">
        <div  class="footer-item fl aic jcsa">
            <a v-for="(item, index) in list" :key="item.id" :class="['footer-item fcc fdc', item.id === 4 ? 'cba' : '']" :href="item.herf">
                <i :class="['iconfont f22',item.icon]"></i>
                <span class="mt-5">{{ item.name }}</span>
            </a>
        </div>
    </footer>

    <script src="../js/axios.js"></script>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script src="../js/vue2.js"></script>
    <script src="../js/common.js"></script>
    <script src="./js/comm.js"></script>
</body>

</html>